<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-form :inline="true" :model="formData">
          <el-row type="flex" justify="end" :gutter="10">
            <el-col :span="24">
              <el-form-item label="关键字" prop="keyword">
                <el-input
                  v-model="formData.keywords"
                  placeholder="根据编号搜索"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" justify="end">
              <el-button size="small" @click="empty">清除</el-button>
              <el-button
                type="primary"
                size="small"
                @click="search"
              >搜索</el-button>
            </el-col>
          </el-row>
        </el-form>

        <!-- --------------------------------------------------------- -->
        <!-- 提示 -->
        <br>
        <el-alert
          :title="`数据一共${this.page.total}`"
          type="info"
          show-icon
          :closable="false"
        />
        <br>
        <!-- table 表格 -->
        <el-table :data="list">
          <el-table-column label="编号" fixed prop="id" width="200" />
          <el-table-column
            label="题型"
            prop="questionType"
            width="100"
            align="center"
            type="fiex"
            :formatter="formatEmployment"
          />

          <!-- 题目编号 -->
          <el-table-column label="题目编号" width="200" align="left">
            <template #default="{ row }">
              <span
                v-for="(item, index) in row.questionIDs"
                :key="index"
                style="color: #0099ff"
                @click="radio(item)"
              >
                {{ item.number }}
              </span>
            </template>
          </el-table-column>
          <!--/题目编号 -->

          <el-table-column
            label="录入时间"
            prop="addTime"
            width="200"
            align="center"
          />
          <el-table-column
            label="答题时间(s)"
            prop="totalSeconds"
            align="center"
          />
          <el-table-column
            label="正确率(%)"
            prop="accuracyRate"
            align="center"
          />
          <el-table-column label="录入人" prop="userName" align="center" />
          <!-- 操作 -->
          <el-table-column label="操作" justify="end" align="center">
            <template #default="{ row }">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                @click="removeRandoms(row)"
              />
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-row justify="end" type="flex">
          <el-pagination
            background
            :current-page="currentPage4"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="20"
            layout="prev, pager,next,sizes,jumper"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
    </div>
    <!-- 弹出层  radio-->
    <radio ref="myradio" :show-dianog.sync="showDianog" :itemid="item" />
  </div>
</template>

<script>
import { randoms, removeRandoms } from '../../api/hmmm/questions'
import { questionType } from '../../api/hmmm/constants'
// 引入组件
import radio from './companys/Serial number/updata-radio.vue'

export default {
  // 注册组件
  components: {
    radio
  },
  data() {
    return {
      formData: {
        keywords: ''
      },
      // 获取过来的数据
      list: [],
      // 分页
      page: {
        page: 1, // 当前页码
        pagesize: 20, // 每页显示多少条
        total: 0, // 总数
        keyword: ''
      },
      // 当前页数
      currentPage4: 1,

      // radio 组件弹出层
      showDianog: false,
      // 弹出层的 id
      item: {}
    }
  },

  created() {
    this.randoms()
  },
  methods: {

    // 获取过来的数据
    async randoms() {
      const { data } = await randoms(this.page)
      console.log(data)
      this.list = data.items
      this.page.total = data.counts
    },
    // 格式化内容 单选/多选
    formatEmployment(row, column, cellValue, index) {
      const obj = questionType.find((item) => item.value === cellValue * 1)
      return obj ? obj.label : '未知'
    },
    // 选择 每页 多少条数据
    handleSizeChange(val) {
      this.page.pagesize = val
      this.randoms()
    },
    // 分页功能
    changePage(newPage) {
      this.page.page = newPage // 2页 已经改变参数，无需在重新传值
      this.randoms()
    },
    // 点击删除
    removeRandoms(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await removeRandoms(row) // 调用删除接口
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          const totalPage = Math.ceil((this.page.total - 1) / this.page.pagesize) // 总页数
          const currentPage = this.page.page > totalPage ? totalPage : this.page.page
          this.page.page = currentPage < 1 ? 1 : currentPage
          this.randoms() // 重新加载数据
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 点击搜索
    async search() {
      this.page.keyword = this.formData.keywords
      await this.randoms(this.page)
    },
    // 点击清空
    empty() {
      this.formData.keywords = ''
    },
    // 点击预览
    radio(item) {
      this.showDianog = true
      this.item = item
      console.log(333)
      console.log(this.item)
      this.$refs.myradio.detail()
    }
  }
}
</script>

<style scoped>
.head {
  background-color: #333;
}
.tip {
  color: "#606266";
  font-weight: 700;
  direction: initial;
  width: 100px;
}
</style>
